<template>
  <nav
    class="z-50 border-b transition-all duration-300 fixed top-0 left-0 right-0 w-full h-18"
    :class="[scrollY > 50 ? 'bg-black/20 border-white/10 backdrop-blur-xl' : '']"
  >
    <div class="max-w-7xl px-6 mx-auto flex items-center justify-between h-full">
      <Logo />

      <div class="hidden md:flex items-center space-x-6">
        <NuxtLink
          to="/guess-football"
          class="px-4 py-2 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          :class="{ 'text-yellow-400 bg-white/10': $route.path === '/guess-football' }"
        >
          足球数据
        </NuxtLink>
        <NuxtLink
          to="/guess-basketball"
          class="px-4 py-2 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          :class="{ 'text-yellow-400 bg-white/10': $route.path === '/guess-basketball' }"
        >
          篮球数据
        </NuxtLink>
        <NuxtLink
          to="/releases"
          class="px-4 py-2 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          :class="{ 'text-yellow-400 bg-white/10': $route.path === '/releases' }"
        >
          版本变迁
        </NuxtLink>
      </div>

      <div class="flex items-center space-x-4">
        <template v-if="isLoggedIn">
          <div class="relative">
            <div
              class="w-11 h-11 rounded-full flex items-center justify-center cursor-pointer border-2 border-white/30 bg-gradient-to-r from-yellow-600/20 to-orange-600/20 backdrop-blur-sm transition-all duration-200 hover:border-yellow-400 hover:shadow-lg hover:shadow-yellow-500/25"
              @click.stop="showUserCard = !showUserCard"
            >
              <img src="@/assets/image/user.svg" alt="用户头像" class="w-6 h-6" />
            </div>
            <UserInfoCard
              ref="userInfoCardRef"
              class="absolute top-13 right-0 opacity-0 invisible translate-y-2.5 transition-all duration-300 ease-in-out"
              :class="{ 'opacity-100! visible! translate-y-0!': showUserCard }"
            />
          </div>
        </template>

        <div v-else class="flex items-center space-x-4">
          <NuxtLink
            to="/login"
            class="px-4 py-2 text-white/80 hover:text-white transition-all duration-200 rounded-lg hover:bg-white/10 font-medium"
          >
            登录
          </NuxtLink>
          <NuxtLink
            to="/register"
            class="px-6 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-full hover:from-yellow-600 hover:to-orange-600 transition-all duration-200 font-semibold shadow-lg hover:shadow-xl hover:shadow-yellow-500/25 transform hover:scale-105"
          >
            注册
          </NuxtLink>
        </div>

        <!-- 移动端菜单按钮 -->
        <button
          class="md:hidden w-10 h-10 flex items-center justify-center text-white/80 hover:text-white hover:bg-white/10 rounded-lg transition-all relative bg-white/10"
          @click="showMobileMenu = !showMobileMenu"
        >
          <div class="w-5 h-4 flex flex-col justify-between relative">
            <span
              class="w-full h-0.5 bg-current rounded-full transition-all duration-300 origin-center absolute top-0"
              :class="showMobileMenu ? 'rotate-45 top-1.75!' : ''"
            ></span>
            <span class="w-full h-0.5 bg-current rounded-full transition-all duration-300" :class="{ 'opacity-0': showMobileMenu }"></span>
            <span
              class="w-full h-0.5 bg-current rounded-full transition-all duration-300 origin-center absolute bottom-0"
              :class="showMobileMenu ? '-rotate-45 bottom-1.75!' : ''"
            ></span>
          </div>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div
      v-if="showMobileMenu"
      class="md:hidden absolute top-full left-0 right-0 bg-black/90 backdrop-blur-xl border-t border-white/10 py-4"
    >
      <div class="flex flex-col space-y-2 px-6">
        <NuxtLink
          to="/"
          class="px-4 py-3 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          @click="showMobileMenu = false"
        >
          首页
        </NuxtLink>
        <NuxtLink
          to="/guess-football"
          class="px-4 py-3 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          @click="showMobileMenu = false"
        >
          足球数据
        </NuxtLink>
        <NuxtLink
          to="/guess-basketball"
          class="px-4 py-3 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          @click="showMobileMenu = false"
        >
          篮球数据
        </NuxtLink>
        <NuxtLink
          to="/releases"
          class="px-4 py-3 rounded-lg text-white/80 hover:text-white hover:bg-white/10 transition-all duration-200 font-medium"
          @click="showMobileMenu = false"
        >
          版本变迁
        </NuxtLink>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

// 滚动条位置
const scrollY = ref(0);
const handleScroll = () => {
  scrollY.value = window.scrollY;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true });
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

// 用户状态
const { isLoggedIn } = toRefs(useUserStore());
const showUserCard = ref(false);
const showMobileMenu = ref(false);
const userInfoCardRef = ref<any>();

// 点击外部关闭用户卡片
const handleClickOutside = (event: MouseEvent) => {
  const cardDom = userInfoCardRef.value?.$el;
  const clickDom = event.target;
  if (!cardDom) return;
  if (!cardDom.contains(clickDom)) showUserCard.value = false;
};

onMounted(() => document.addEventListener('click', handleClickOutside));
onUnmounted(() => document.removeEventListener('click', handleClickOutside));
</script>
